﻿<?xml version="1.0" encoding="utf-8" ?>
<content>
	<mainContent>
		<![CDATA[
		<h2>Client Side Validation<span>As Easy As.</span></h2>
		<p>Included with DNAide is <strong>ValidationAide</strong> which is a JavaScript client side form validation script based on jQuery and initially inspired by the great prototype based work found at <a href="http://tetlaw.id.au/view/" class="newwindow">Dexagogo</a>. Field errors can be grouped and reported together (as an unordered list of hyperlinks to errored fields), or errors can be reported inline. In addition errored fields can have their css modified to reflect an error. You can even hook into pre and post validation events down to the field level to do your own magic!</p>
			
		<p>Integrating client side form validation is as simple as adding a css class to a form element e.g.</p>
			
		<pre class="csharpcode">
&lt;input type=<span class="str">"text"</span> id=<span class="str">"FirstName"</span> <span class="kwrd">class</span>=<span class="str">"text validator-required"</span> /&gt;</pre>
		
		<p>The above adds a "validator-required" class to the "FirstName" text box. "validator-required" is in fact the id of the validation rule that ValidationAide will check the field value against "on submit". The css class itself does not actually exist on any css style sheet. You can add multiple "validator classes" per field. ValidationAide will check through each one sequentially, returning a field error on the first rule failure.</p>
			
		<p>ValidationAide itself comes with a number of pre-built rules such as required, email address etc. You can of course write your own.</p>
			
		<h3>Examples:</h3>
		<ul>
			<li><a href="examples/simple.htm" class="newwindow">Simple</a></li>
			<li><a href="examples/custom-messages.htm" class="newwindow">Custom Messages</a></li>
			<li><a href="examples/custom-rules.htm" class="newwindow">Custom Rules</a></li>
			<li><a href="examples/inline.htm" class="newwindow">Hiding Validation Summary</a></li>
			<li><a href="examples/init-events.htm" class="newwindow">Initialize Events</a></li>
			<li><a href="examples/field-events.htm" class="newwindow">Field Events</a></li>
		</ul>
		
		<h3>Registering ValidationAide via DNAide.</h3>
		<p>ValidationAide is embedded into DNAide as a resource. You can register the script using the following example:</p>
		<pre class="csharpcode">
ScriptAide.CurrentContext.RegisterDNAideScriptResource(DNAideScriptResource.JQuery);

ScriptAide.CurrentContext.RegisterDNAideScriptResource(DNAideScriptResource.JQueryStringAide);

ScriptAide.CurrentContext.RegisterDNAideScriptResource(DNAideScriptResource.JQueryValidationAide);
</pre>

		<h3>Quick Reference</h3>
		<p><strong>Default Validation Rules</strong></p>
		<ul>
			<li>validator-required</li>
			<li>validator-email</li>
			<li>validator-number</li>
			<li>validator-digits</li>
			<li>validator-alphanum</li>
			<li>validator-date-ddmmyyyy</li>
			<li>validator-date-mmddyyyy</li>
			<li>validator-url</li>
		</ul>
		
		<p><strong>Configuration Options</strong></p>
		<p>When initializing the validator, you can pass the following options:</p>
		<ul>
			<li><strong>showInlineMessages</strong> - default false</li>
			<li><strong>inlineShowSpeed</strong> - default "" (fastest)</li>
			<li><strong>inlineMessageElementIdPrefix</strong> - default "ValidationInlineErrorMessage-"</li> 
			<li><strong>inlineMessageCssClass</strong> - default "validation-inline-error-message"</li>
			<li><strong>showSummary</strong> - default true</li>
			<li><strong>summaryElementId</strong> - default "ClientValidationSummary"</li>
			<li><strong>summaryMessage</strong> - default "Please correct the following:"</li>
			<li><strong>summaryFieldMessageFormat</strong> - default "##FIELD## - ##MESSAGE##"</li>
			<li><strong>fieldErrorCssClass</strong> - default "validation-failed"</li>
		</ul>
		
		<pre class="csharpcode">
$(<span class="str">"#TestForm"</span>).validationAideEnable(<span class="kwrd">null</span>, {showInlineMessages:<span class="kwrd">true</span>, inlineShowSpeed:<span class="str">"fast"</span>});</pre>

		<h3>Why Bother?</h3>
			
		<p>As ValidationAide is a JavaScript file, it is not exclusive to running on ASP.NET based sites. However, for those running ASP.NET sites, why use ValidationAide over the built in validation controls? After all these controls will perform both client and server side validation.</p>
			
		<p>It really is a matter of preference. I prefer to use ValidationAide for relatively simple client side validation e.g. checking mandatory fields are completed, email addresses / dates are of the correct format. Simple stuff. I then have a busness rule layer on the server side which checks everything including more complex business rules / logic not handled by ValidationAide. I believe this pattern works very well. </p>
		]]>
	</mainContent>

	<secondaryContent>
		<![CDATA[
		]]>
	</secondaryContent>
</content>